M
MLOG
Rozdělování kódu (Code Splitting) ve frontendu: Podle rout a komponent | MLOG | MLOG ); } export default App;

V tomto příkladu je komponenta MyComponent načítána líně pomocí React.lazy() a dynamického importu. Komponenta Suspense poskytuje záložní UI, zatímco se komponenta načítá.

Příklad (Intersection Observer API)


import React, { useState, useEffect, useRef, Suspense, lazy } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
 const [isVisible, setIsVisible] = useState(false);
 const componentRef = useRef(null);

 useEffect(() => {
 const observer = new IntersectionObserver(
 ([entry]) => {
 setIsVisible(entry.isIntersecting);
 },
 { threshold: 0.1 }
 );

 if (componentRef.current) {
 observer.observe(componentRef.current);
 }

 return () => {
 if (componentRef.current) {
 observer.unobserve(componentRef.current);
 }
 };
 }, []);

 return (
 

 {isVisible ? (
 Načítání...
}>
 
 
 ) : (
 
Zástupný obsah

 )}
 
 );
}

export default App;

Tento příklad používá Intersection Observer API k detekci, kdy je komponenta viditelná ve viewportu. Stavová proměnná isVisible se aktualizuje na základě stavu průsečíku a komponenta MyComponent se načte pouze tehdy, když se stane viditelnou.

Výhody rozdělování kódu podle komponent

Nevýhody rozdělování kódu podle komponent

Výběr správného přístupu

Nejlepší přístup k rozdělování kódu závisí na specifických vlastnostech aplikace. Zde jsou některá obecná doporučení:

Nástroje a techniky

S rozdělováním kódu může pomoci několik nástrojů a technik:

Globální aspekty

Při implementaci rozdělování kódu je důležité zvážit globální dopady na uživatele vaší aplikace. To zahrnuje faktory jako:

Závěr

Code splitting je klíčovou technikou pro optimalizaci výkonu moderních webových aplikací. Strategickým rozdělením kódu aplikace na menší chunky a jejich načítáním na vyžádání mohou vývojáři výrazně snížit počáteční dobu načítání, zlepšit uživatelskou zkušenost a optimalizovat využití zdrojů. Ať už si vyberete přístup založený na routách, komponentách nebo jejich kombinaci, pochopení principů a technik rozdělování kódu je nezbytné pro vytváření rychlých, responzivních a globálně přístupných webových aplikací.

Nezapomeňte neustále monitorovat a analyzovat výkon vaší aplikace, abyste identifikovali oblasti pro zlepšení a postupem času zdokonalovali své strategie rozdělování kódu.

Další zdroje